<template>
  <div class="index-box">
      <div class="title">
          <span>结算单明细</span>
      </div>
      <div class="btn-box">
          <el-upload 
              class="cleanbtn-box"
              action="http://sun.xinlinju.net/oss/upload"
              :on-preview="handlePreview"
              :headers="headers"
              :on-success="handlesuccess"
              accept="image/png,image/jpg,image/jpeg"
              multiple  
              :show-file-list="false"
            >
            <el-button size="mini" type="primary" class="cleanbtn" v-if="headdata[0].company_fianl_status == 2">上传附件</el-button>
          </el-upload>
          <el-button size="mini" type="primary" class="succeedbtn" @click="getapplySettle" v-if="headdata[0].company_fianl_status == 0">提交</el-button>
      </div>
      <div class="index-middlebox">
          <el-table :data="headdata"
                        border
                        style="width: 100%" >
              <el-table-column prop="corrency_date"
                                label="物业管理公司名称"
                                 align="center">
                </el-table-column>
              <el-table-column prop="corrency_date"
                                label="小区名称"
                                 align="center">
                </el-table-column>
              <el-table-column prop="corrency_date"
                                label="结算时间"
                                 align="center">
                </el-table-column>
              <el-table-column prop="property_management_fee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
              <el-table-column prop="water_electricity_cost"
                                label="水电费"
                                 align="center">
                </el-table-column>
              <el-table-column prop="cost_total"
                                label="总结算费"
                                 align="center">
                </el-table-column>
              <!-- <el-table-column prop="company_fianl_status"
                                label="结算状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.company_fianl_status == 1">提交</span>
                                  <span v-if="scope.row.company_fianl_status == 2">确认</span>
                                  <span v-if="scope.row.company_fianl_status == 3">拒绝</span>
                                </template>
                </el-table-column> -->
          </el-table>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        style="width: 100%" >
                <el-table-column type="index"
                                label="序号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="mobile_plone"
                                label="手机号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="user_site"
                                label="业主楼房号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="tenement_fee"
                                label="物业管理费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='plumber_fee'
                                label="水电费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='totalFee'
                                label="总结算费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='applyName'
                                label="提交人"
                                align="center">
                </el-table-column>
                <el-table-column prop='confirmName'
                                label="确认人"
                                 align="center">
                </el-table-column>
                </el-table>
            </template>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getfindDetailInfo, getapplySettle, getuploadFileSettle} from "@/api/PropertyManagement";
import { getToken } from '@/utils/auth'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        headers: {
            'token':getToken()
        },
        merchandiseList:[],
        supplierid:'',
        value: '',
        date: '',
        headdata:[],
        dialogVisible:false,
        company_fianl_status:0,
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.id = this.$route.query.id
    this.getfindDetailInfo()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      // 获取详情
      getfindDetailInfo(){
        getfindDetailInfo(this.id).then(res => {
          console.log(res)
          this.company_fianl_status = res.data.settleInfo.company_fianl_status
          this.headdata.push(res.data.settleInfo)
          this.merchandiseList = res.data.detailInfoList
        })
      },
    //   确认结算单
      getapplySettle(){
          let data = {
              id: this.id,
              propertyDelete:1,
              companyFianlStatus:1
          }
          getapplySettle(data).then(res => {
              console.log(res)
              if(res.code == 20000){
                  this.$message('已提交')
                  this.$router.go(-1)
              }
          })
      },
    //   上传图片
      handlePreview(file){
          
      },
      handlesuccess(res,file,list){
          console.log(res)
          let img = res.extParams.path
          let data = {
              id: this.id,
              imgUrl:img
          }
          getuploadFileSettle(data).then(res => {
              if(res.code == 20000){
                  this.$message('上传成功')
              }
          })
      }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
         .table-box{
            border: 1px solid #000;
            border-collapse:collapse;
            .tite-td{
                font-size: 16px;
                font-weight: bold;
            }
            td{
                width: 275px;
                height: 40px;
                text-align: center;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .btn-box{
        width: 100%;
        display: flex;
        justify-content: flex-end;
       padding-right: 40px;
       box-sizing: border-box;
       margin-bottom: 20px;
       .cleanbtn-box{
           margin-right: 20px;
       }
        .cleanbtn{
            width: 100px;
            height: 40px;
        }
        .succeedbtn{
            width: 100px;
            height: 40px;
        }
    }
}
</style>
